<#assign ctx=springMacroRequestContext.contextPath />
<#include "/macro/publicMacro.ftl">
<#import "/macro/pagination.ftl" as Pagination>
<#import "/macro/FormItem.ftl" as Form>

<@header title="CmsArticle编辑">
    <link href="${ctx}/resource/frame/datetimepicker/jquery.datetimepicker.min.css" rel="stylesheet">
    <link href="${ctx}/resource/frame/bootstrap-input/themes/explorer-fas/theme.min.css" rel="stylesheet">
    <link href="${ctx}/resource/frame/bootstrap-input/css/fileinput.min.css" rel="stylesheet">
</@header>

<@body>
<h2 class="module-title">CmsArticle编辑</h2>

<div class="alert alert-primary" role="alert">
    <button class="btn btn-info" onclick="javascript: history.back(-1);return false;" >返回</button>
</div>

<form class="form-horizontal" id="cmsArticleForm" action="${ctx}/cmsArticle/save" method="post" onsubmit="return save();">  <!-- enctype="multipart/form-data" -->
    <input type="hidden" name="id" value="${cmsArticle.id}"/>
    <@Form.FormItem name="tenantId" label="租户id">
        <select class="form-control" name="tenantId" id="tenantId">
            <#list tenants as tenant>
                <option value="${tenant.id}" <#if tenant.id == cmsArticle.tenantId>selected</#if>>${tenant.description}</option>
            </#list>
        </select>
    </@Form.FormItem>
    <@Form.FormItem name="type" label="文章类型">
        <select class="form-control" name="type" id="type">
            <#list articleTypes as atype>
                <option value="${atype}" >${atype.desc}</option>
            </#list>
        </select>
    </@Form.FormItem>
    <@Form.FormItem name="title" label="标题名称" id="titlePane">
        <input type="text" class="form-control" name="title" id="title" aria-describedby="标题名称" value="${cmsArticle.title}">
    </@Form.FormItem>

    <@Form.FormItem name="subTitle" label="子标题" id="subTitlePane">
        <input type="text" class="form-control" name="subTitle" id="subTitle" aria-describedby="子标题" value="${cmsArticle.subTitle}">
    </@Form.FormItem>
    <@Form.FormItem name="mainImage" label="主图片" id="mainImagePane">
        <div class="form-group">
            <input type="hidden" name="mainImage" id="mainImage" value="${cmsArticle.mainImage}"/>
            <div class="file-loading">
                <input type="file" id="mainImageFile" value="${cmsArticle.mainImage}" class="file" data-overwrite-initial="false" data-min-file-count="1" data-theme="fas">
            </div>
        </div>
    </@Form.FormItem>
    <@Form.FormItem name="subImages" label="子图片" id="subImagesPane">
        <div class="form-group">
            <input type="hidden" name="subImages" id="subImages" value="${cmsArticle.subImages}"/>
            <div class="file-loading">
                <input type="file" id="subImagesFile" value="${cmsArticle.subImages}" multiple class="file"
                       data-overwrite-initial="false" data-min-file-count="2" data-theme="fas">
            </div>
        </div>
    </@Form.FormItem>
    <@Form.FormItem name="content" label="内容">
        <input type="hidden" name="content" id="content"/>
        <input type="textarea" class="form-control" name="contentEditor" id="contentEditor" aria-describedby="内容">
    </@Form.FormItem>
    <@Form.FormItem name="enable" label="是否可用">
        <select class="form-control" name="enable" id="enable">
            <#list statusValues as status>
                <option value="${status}" <#if status == cmsArticle.enable>selected</#if>>${status.desc}</option>
            </#list>
        </select>
    </@Form.FormItem>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </div>
</form>
</@body>

<@footer>
    <script src="${ctx}/resource/frame/datetimepicker/jquery.datetimepicker.full.min.js"></script>
    <script src="${ctx}/resource/common/js/jquery.validate.min.js"></script>
    <script src="${ctx}/resource/common/js/validate_zh.js"></script>
    <script src="${ctx}/resource/common/js/ckeditorConfig.js"></script>
    <script src="${ctx}/resource/frame/ckeditor/ckeditor.js"></script>
    <script src="${ctx}/resource/frame/bootstrap-input/js/fileinput.min.js"></script>
    <script src="${ctx}/resource/frame/bootstrap-input/js/plugins/sortable.js"></script>
    <script src="${ctx}/resource/frame/bootstrap-input/js/locales/zh.js"></script>
    <script src="${ctx}/resource/frame/bootstrap-input/themes/fas/theme.min.js"></script>
    <script src="${ctx}/resource/frame/bootstrap-input/themes/explorer-fas/theme.min.js"></script>

    <script type="text/javascript">
        var editor = initCkeditor('contentEditor', "${ctx}");
        editor.setData('${cmsArticle.content}');
        var maxFileCount = 1;

        var mainImageUrl = "http://" +window.location.host + "${cmsArticle.mainImage}";
        $("#mainImageFile").fileinput({
            theme: 'fas',
            uploadUrl: '${ctx}/common/bupload', // you must set a valid URL here else you will get an error
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            overwriteInitial: false,
            maxFileSize: 1000,
            // maxFilesNum: 10,
            //allowedFileTypes: ['image', 'video', 'flash'],
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [mainImageUrl],
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on('fileuploaded', function(event, data, previewId, index) {
            console.info(data);
            $("#mainImage").val(data.response.url);
            console.info($("#mainImage").val());
            console.info(data.response.url);
        });

        var subImageArray = [];
        $("#subImagesFile").fileinput({
            theme: 'fas',
            uploadUrl: '${ctx}/common/bupload', // you must set a valid URL here else you will get an error
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            overwriteInitial: false,
            maxFileSize: 1000,
            overwriteInitial: false,
            initialPreviewAsData: true,
            // maxFilesNum: 10,
            //allowedFileTypes: ['image', 'video', 'flash'],
            initialPreview: ["/uimg/1633361609111_44.jpg","/uimg/1633421066679_11.jpg"],
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on('fileuploaded', function(event, data, previewId, index) {
            console.info(data);
            console.info(subImageArray.length)
            subImageArray.push(data.response.url);
            console.info(subImageArray.length);
            if (index == data.files.length-1) {
                $("#subImages").val(JSON.stringify(subImageArray));
                console.info("subImages" + $("#subImages").val());
                subImageArray.splice(0,subImageArray.length);
            }
        });

        function save() {
            var articleContent = editor.getData();
            $("#content").val(articleContent);
            console.info("content:" + articleContent);
            return true;
        }

        $(function () {
            $('.custom-file-input').on('change',function(){
                var fileNames = $(this)[0].files;
                console.info(fileNames);
                var fileName = "";
                for(var i=0; i<fileNames.length; i++) {
                    fileName = fileName + fileNames[i].name + ";";
                }
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });

            $("#titlePane").show();
            $("#subTitlePane").show();
            $("#mainImagePane").hide();
            $("#subImagesPane").hide();

            $('#type').change(function(){
                var value=$(this).children('option:selected').val();//这就是selected的值
                console.info("value:"  + value);
                $("#subImages").removeAttr("data-min-file-count");
                $("#subImages").removeAttr("data-max-file-count");
                maxFileCount = 1;
                if (value == 'title') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").hide();
                    $("#subImagesPane").hide();
                } else if (value == 'title_picture') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").hide();
                } else if (value == 'title_picture_big') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").hide();
                } else if (value == 'title_picture_subTitle') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").show();
                } else if (value == 'title_picture_subP2') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").show();
                    $("#subImages").attr("data-min-file-count", 2);
                    $("#subImages").attr("data-max-file-count", 2);
                    maxFileCount = 2;
                } else if (value == 'title_picture_subP3') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").show();
                    $("#subImages").attr("data-min-file-count", 3);
                    $("#subImages").attr("data-max-file-count", 3);
                    maxFileCount = 3;
                } else if (value == 'title_picture_subP4') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").show();
                    $("#subImages").attr("data-min-file-count", 4);
                    $("#subImages").attr("data-max-file-count", 4);
                    maxFileCount = 4;
                } else if (value == 'title_picture_subP6') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").show();
                    $("#subTitle").attr("data-min-file-count", 6);
                    $("#subTitle").attr("data-max-file-count", 6);
                    maxFileCount = 6;
                } else if (value == 'title_picture_subP8') {
                    $("#titlePane").show();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").show();
                    $("#subImages").attr("data-min-file-count", 8);
                    $("#subImages").attr("data-max-file-count", 8);
                    maxFileCount = 8;
                } else if (value == 'title_subTitle') {
                    $("#titlePane").show();
                    $("#subTitlePane").show();
                    $("#mainImagePane").hide();
                    $("#subImagesPane").hide();
                } else if (value == 'picture') {
                    $("#titlePane").hide();
                    $("#subTitlePane").hide();
                    $("#mainImagePane").show();
                    $("#subImagesPane").hide();
                }
                var subImageStr = "${cmsArticle.subImages}";
                var subImageList = subImageStr.split(","); //, initialPreview: subImageList
                $("#subImagesFile").fileinput({maxFileCount: maxFileCount, minFileCount: maxFileCount});

            });

            var articleType = "${cmsArticle.type}";
            $("#type").val(articleType).trigger("change");
        });



        function show() {
            var fileNames = $("#mainImage")[0].files;
            console.info(fileNames);
        }

        $().ready(function() {
            $("#cmsArticleForm").validate({
                rules: {
                    id: {
                        required: true,
                        digits: true
                    },
                   tenantId: "required" ,
                    title: "required" ,
                   type: "required" ,
                   subTitle: {
                      maxlength: 2048
                   },
                   mainImage: {
                      maxlength: 1024
                   },
                   subImages: {
                      maxlength: 2048
                   },
                    score: {
                        required: true,
                        digits: true
                    },
                    content: "required" ,
                    enable: {
                        required: true
                    },
                    userId: {
                        required: true,
                        digits: true
                    }
                }
            });
        });
    </script>
</@footer>